<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>详情页</title>
    <!-- 引入核心的css文件 -->
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.css">
    <!-- 引入图标样式文件 -->
    <link rel="stylesheet" href="./libs/font/bootstrap-icons.css">
    <style>
        .bi {
            font-size: 30px !important;
            cursor: pointer;
            vertical-align: middle;
        }
        .my_cover {
            width: 100%;
        }
        .my_card_body > div {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <header class="detail-header bg-info p-5 text-white d-flex">
                 <h3>词汇详情</h3>
                 <button class="btn my_detail_button">返回</button>
            </header>
            <section class="detail-main">
                 <div class="card">
                    <div class="card-header">
                        <img src="http://" class="my_cover" alt="">
                    </div>
                     <div class="card-body my_card_body">
                        <div>
                            <span>词汇</span>  
                            <i class="bi bi-volume-down"></i>
                        </div>
                        <div>
                            <span>音标</span>
                        </div>
                        <div>
                             <span>翻译</span>
                        </div>
                        <div>
                            <span>词义</span>
                        </div>
                        <div>
                            <span>句子</span>
                            <i class="bi bi-volume-down"></i>
                        </div>
                        <div>
                            句子翻译
                        </div>
                     </div>
                 </div>
            </section>
        </div>
    </div>

    <!-- 引入jquery文件 -->
    <script src="./libs/jquery/jquery.min.js"></script>
    <!-- 引入bootstrap核心JS文件 -->
    <script src="./libs/bootstrap/js/bootstrap.bundle.js"></script>
     <!-- 引入工具函数 -->
     <script src="./utils/speak.js"></script>
     <!-- 引入配置文件 -->
      <script src="./config/index.js"></script>
    <!-- 引入detail.js自己的脚本文件 -->
    <script src="./javascripts/detail.js"></script>
</body>
</html>